<template>
	<view>
		<view class="search_bar">
			<uni-search-bar :radius="100" @confirm="search" @input="input" @cancel="uni.navigateBack(1)"></uni-search-bar>
		</view>
		<!-- 搜索结果列表 -->
		<view class="searchRes_list" v-if="search_value">
			<view class="searchRes_item" v-for="(item, i) in searchList" :key="i" @click="gotoGoodsList(item)">
				<!-- 文字 -->
				<view class="searchRes_item_txt">{{item.goods_name}}</view>
				<!-- 右侧小箭头 -->
				<uni-icons type="arrowright" size="17"></uni-icons>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="history_list" v-else>
			<uni-icons type="trash" size="17" @click="cleanHistory" class="history_del"></uni-icons>
			<uni-tag :text="item" v-for="(item, i) in historys" :key="i" class="history_item" @click="gotoGoodsList(item)"></uni-tag>
		</view> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_value: '',		// 搜索内容
				searchList: [],			// 搜索结果列表
				getSearchList_timeout: null,		// 节流定时器
				historyList: JSON.parse(uni.getStorageSync('historyList') || '[]')			// 搜索历史列表
			};
		},
		computed: {
			// 将历史数据列表反转过来
			historys() {
				return [...this.historyList].reverse()
			}
		},
		onLoad() {
			console.log(uni)
			this.getSearchList()
			console.log(this.historyList)
		},
		methods: {
			// 搜索的内容
			input(e) {
				// console.log(e)
				this.search_value = e
				
				// 如果内容是空,清除搜索结果列表
				if (!this.search_value.trim().length) {
					this.searchList = []
				}
				
				// 请求节流处理
				clearTimeout(this.getSearchList_timeout)
				this.getSearchList_timeout = setTimeout(() => {
					this.getSearchList()	// 调用：获取搜索结果列表
					console.log(666)
				}, 600);
			},
			// 获取搜索的结果列表
			async getSearchList() {
				// 如果搜索内容是空的 就不发起请求获取列表
				// 如果没有输入内容,就显示历史搜索
				if (!this.search_value.trim().length) {
					
				} else {
					// 如果输入了内容
					let { data } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.search_value })
					// console.log(res)
					if (data.meta.status !== 200 ) uni.$showMsg()
					this.searchList = [...data.message]
					
					// 添加搜索历史
					this.saveSearchHistory()
				}
			},
			// 保存历史列表
			saveSearchHistory() {
			  const set = new Set(this.historyList)
			  set.delete(this.search_value)
			  set.add(this.search_value)
			  this.historyList = Array.from(set)
			  // 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
			  uni.setStorageSync('historyList', JSON.stringify(this.historyList))
				console.log(this.historyList)
			},
			// 清空历史列表
			cleanHistory() {
				uni.setStorageSync('historyList', '[]')
				this.historyList = []
			},
			gotoGoodsList(kw) {
				uni.navigateTo({
					url: '/subpkg/goods_list/goods_list?query=' + kw
				})
			}
		}
	}
</script>

<!-- 样式 -->
<style lang="scss">

.search_bar {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: #c00000;
}

.searchRes_item {
	display: flex;
	border-bottom: 1px solid #eee;
	margin: 3px;
	margin-left: 5px;
	padding: 12px;
	padding-right: 5px;
	padding-left: 0px;
	
	.searchRes_item_txt {
		// 文字不允许换行（单行文本）
		white-space: nowrap;
		// 溢出部分隐藏
		overflow: hidden;
		// 文本溢出后，使用 ... 代替
		text-overflow: ellipsis;
		margin-right: 3px;
		font-size: 14px;
		color: #444;
	}
}


.history_list {
	position: relative;
}
// 搜索历史
.history_item {
	display: inline-block;
	padding: 2px 5px;
	margin: 5px 3px;
}
// 清除历史按钮
.history_del {
	display: block;
	height: 40px;
	width: 40px;
	padding: 1px;
	position: absolute;
	top: 8px;
	right: -10px;
}

</style>
